<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会议展示</title>
</head>
<style>
    #app {
        padding: 20px;
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    #app div {
        padding: 15px;
        background-color: #fff;
        border: 1px solid #dee2e6;
        margin-bottom: 15px;
    }

    #app h2 {
        margin: 0;
        font-size: 20px;
        color: #333;
    }

    #app p {
        margin: 5px 0;
        font-size: 16px;
        color: #666;
    }

    #app button {
        padding: 8px 16px;
        background-color: #007bff;
        color: white;
        border: none;
        cursor: pointer;
        margin-right: 10px;
    }
</style>
<body>
<div id="app">
    <div>
        <h2>会议</h2>
        <p>9:00 - 10:00</p>
        <button>编辑</button>
        <button>删除</button>
    </div>
</div>
<script src="../../js/vue.js"></script>
<script>
    /*
            访问页面的时候，把日程打印到页面

     */
    new Vue({
        el: "#app",
        data: {
            schedules: [{
                id: 1,
                title: '会议',
                time: '9:00 - 10:00'
            },
                {
                    id: 2,
                    title: '培训',
                    time: '14:00 - 16:00'
                },
                {
                    id: 3,
                    title: '拜访客户',
                    time: '17:00 - 18:00'
                }
            ]
        }
    });
</script>
</body>
</html>